<template>
	<view>
		<u-navbar title=" " :bgColor="navbarBg" placeholder>
			<view class="u-nav-slot" slot="left">
				<view>工作台</view>
			</view>
		</u-navbar>
		<view class="top-bg">
			<image src="/static/image/home-top-image.png" mode="aspectFill"></image>
		</view>
		<!-- 加载状态 -->
		<u-loading-page :loading="loading" bgColor="#F5F5F5" loadingColor="#24C98F" fontSize="14" loadingText="数据加载中"
			iconSize="40"></u-loading-page>
		<view class="p16" v-if="!loading">
			<u-row justify="space-between" gutter="10">
				<u-col span="6">
					<view class="data-card p16 br-8">
						<view class="fw-500 fs-13 lh-2 color-5F6865">已陪诊</view>
						<view class="fw-700 color-258463 fs-24 pt-14">{{ statistics.accompaniedCount || 0 }} <span
								class="fw-400 fs-12 color-5F6865">人</span>
						</view>
						<image src="/static/image/ypz-image.png" mode="aspectFill"></image>
					</view>
				</u-col>
				<u-col span="6">
					<view class="data-card p16 br-8">
						<view class="fw-500 fs-13 lh-2 color-5F6865">已服务</view>
						<view class="fw-700 color-258463 fs-24 pt-14">{{ statistics.totalServiceCount || 0 }} <span
								class="fw-400 fs-12 color-5F6865">人</span>
						</view>
						<image src="/static/image/yfw-imag.png" mode="aspectFill" style="bottom:12rpx;"></image>
					</view>
				</u-col>
			</u-row>
			<view class="pt-8">
				<!-- 有数据时显示订单列表 -->
				<view v-if="orderList && orderList.length > 0">
					<view class="item bg-fff p16 mt-8 br-8" v-for="(item,index) in orderList" :key="index"
						@click="toDetail(item)">
						<view class="flex-align">
							<image :src="item.categoryIcon || '/static/image/default-icon.png'" mode="aspectFill"
								class="order-type-image"></image>
							<view class="fw-600 fs-16 color-5F6865 flex-1 ps-8">{{ item.productName || '陪诊服务' }}</view>
							<view class="fw-500 fs-12 color-F5715D">{{ getStatusText(item.status) }}</view>
						</view>
						<view class="lable-box flex-align mt-8">
							<view class="lable-item bg-f5 fw-400 fs-14 bg-F5F9F9 color-76848E px-12 py-6 me-8 mt-8"
								v-if="item.hospitalName">
								{{ item.hospitalName }}
							</view>
							<view class="lable-item bg-f5 fw-400 fs-14 bg-F5F9F9 color-76848E px-12 py-6 me-8 mt-8"
								v-if="item.department">
								{{ item.department }}
							</view>
						</view>
						<view class="fw-400 fs-14 lh-2 color-5F6865 mt-8" v-if="item.serviceTime">
							服务时间 <span class="color-24C98F ps-4">{{ item.serviceTime }}</span>
						</view>
						<view class="buttons flex-align mt-8">
							<view class="flex-1"></view>
							<u-button text="接单" v-if="item.status === 2"
								:customStyle="`${buttonStyle};background-color: #24C98F;color:#fff`"
								@click.native.stop="acceptOrder(item)"></u-button>
							<u-button text="查看" :customStyle="buttonStyle"
								@click.native.stop="toDetail(item)"></u-button>
						</view>
					</view>
				</view>

				<!-- 空状态提示 -->
				<view v-else class="empty-state">
					<image src="/static/image/data.png" mode="aspectFit" class="empty-image"></image>
					<view class="empty-text">暂无待接单订单</view>
					<view class="empty-desc">您还没有待接单的陪诊订单</view>
					<u-button text="刷新" :customStyle="refreshButtonStyle" @click="getServiceOrderList('upper')"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarBg: 'rgba(36, 201, 143, 0)',
				buttonStyle: 'width:176rpx;font-weight: 400;color:#5F6865;height:68rpx;margin-left:32rpx;border-radius:8rpx;',
				refreshButtonStyle: 'width:200rpx;font-weight: 400;color:#fff;height:68rpx;border-radius:8rpx;background-color: #24C98F;',
				loading: true,
				orderList: [], // 订单列表
				statistics: {
					accompaniedCount: 0, // 已陪诊人数
					totalServiceCount: 0 // 已服务人数
				},
				// 订单状态映射
				statusMap: {
					2: '待接单',
					3: '待服务',
					4: '服务中',
					5: '待评价',
					6: '已完成'
				}
			}
		},
		onPageScroll(e) {
			const opacity = Math.min(e.scrollTop / 100, 1);
			this.navbarBg = `rgba(36, 201, 143, ${opacity})`;
		},
		onShow() {
			this.refreshPage();
			this.publicMessage();
		},
		onReachBottom() {
			this.getServiceOrderList('lower'); // 首页2为待接单
		},
		methods: {
			refreshPage() {
				if (uni.getStorageSync('userInfo').token) {
					this.getServiceOrderList('upper'); // 首页2为待接单
				} else {
					uni.navigateTo({
						url: '/pages/login'
					})
				}
			},
			// 获取服务订单列表
			getServiceOrderList(type) {
				// 判断上拉还是下拉
				if (type === 'upper') {
					this.current_page = 1;
				} else if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						return console.log('真没有了~~');
					} else {
						this.current_page += 1;
					}
				}
				this.$api.get({
					url: '/companion/order/service/list',
					data: {
						status: 2
					},
					success: res => {
						this.loading = false;
						this.statistics.accompaniedCount = res.accompaniedCount || 0;
						this.statistics.totalServiceCount = res.totalServiceCount || 0;
						if (type === 'lower') {
							this.orderList = this.list.concat(res.orders);
						} else {
							this.orderList = res.orders;
						}
						if (this.orderList.length) {
							this.kong = false;
						} else {
							this.kong = true;
						}
						this.last_page = res.pages; //总页码
					}
				});
			},
			// 获取状态文本
			getStatusText(status) {
				return this.statusMap[status] || '未知状态';
			},
			// 接单
			acceptOrder(item) {
				uni.showModal({
					title: '确认接单',
					content: '确定要接受这个陪诊订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.get({
								url: '/companion/order/service/accept',
								loadingTip: '处理中...',
								data: {
									orderNumber: item.orderNumber
								},
								success: (resp) => {
									this.$f.msg('接单成功');
									this.getServiceOrderList('upper');
								},
								fail: (err) => {
									this.$f.msg('接单失败，请稍后重试');
								}
							});
						}
					}
				});
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/home/detail?orderNumber=${item.orderNumber}`
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.top-bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;

		image {
			width: 100%;
			height: 480rpx;
		}
	}

	.u-nav-slot {
		margin-left: 16rpx;

		view {
			position: relative;
			font-weight: 600;
			font-size: 36rpx;
			color: #05573A;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -16rpx;
				width: 80rpx;
				height: 4rpx;
				background-color: #24C98F;
			}
		}
	}

	.data-card {
		position: relative;
		background: linear-gradient(180deg, #DDFFF3 0%, rgba(255, 255, 255, 0.95) 100%);

		image {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 126rpx;
			height: 120rpx;
		}
	}

	.item {
		.order-type-image {
			width: 48rpx;
			height: 48rpx;
		}

		.lable-box {
			flex-wrap: wrap;
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 0;
		background-color: #fff;
		border-radius: 8rpx;
		margin-top: 16rpx;

		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 32rpx;
		}

		.empty-text {
			font-size: 32rpx;
			font-weight: 600;
			color: #5F6865;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 28rpx;
			color: #76848E;
			margin-bottom: 48rpx;
		}
	}
</style>